<template>
<!-- 封装弹层组件以便复用 -->
<div>
    <!-- 放置dialog弹出层 -->
    <el-dialog
    :title="showTitle"
    @close="close"
    :visible="showDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="600px" 
    center
    >
    <!-- 放置表单 -->
    <el-form
    label-width="120px"
    status-icon
    :model="permissionForm"
    :rules="rules"
    ref="permissionForm"
    >
      <el-form-item prop="name" label="权限名称：">
        <el-input 
        v-model="permissionForm.name"
        size="small" 
        style="width:80%;"
        placeholder="2-20位的非空字符"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" label="权限标识：">
        <el-input 
        v-model="permissionForm.code"
        size="small" 
        style="width:80%;"
        placeholder="2-20位的非空字符"
        ></el-input>
      </el-form-item>
      <el-form-item prop="description" label="权限描述：">
        <el-input 
        v-model="permissionForm.description"
        type="textarea"
        :row="4"
        size="small" 
        style="width:80%;"
        ></el-input>
      </el-form-item>
      <el-form-item prop="enVisible"  label="开启：">
        <el-switch 
        v-model="permissionForm.enVisible"
        active-value="1"
        inactive-value="0"
          
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-button type="primary"
              style="width:25%;margin-top:10px;margin-right: 20px;margin-left: 20px;"
              @click="btnOk"
              >确定</el-button>
              <el-button 
              style="width:25%;"
              @click="close"
              >取消</el-button>
            </el-col>
          </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
</div>
</template>

<script>
import {Message} from 'element-ui'
import {getPermissionList,addPermission,getPermissionDetail,editPermissionDetail} from '@/api/permission'
export default {
  created(){

  },
  data(){
    return {
      // 权限表单数据初始化
      permissionForm:{
        name:'',//权限点名字
        code:'',//权限点标识
        description:'',//权限点描述
        type:'',//权限点类型,不需要显示 因为点击添加的时候已经知道类型了
        pid:'',//权限点父级id,因为做的是树 需要知道添加到哪个节点下了
        enVisible:'0'//权限点开启状态(String)--'0'关闭，'1'开启
      },
      // 权限表单数据规则
      rules:{
        name:[
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          {
            pattern: /^\S{2,20}$/,
            message: '名称必须是2-20位的非空字符',
            trigger: 'blur'
          },
          // 自定义检验
          {
            validator:async(rule,value,callback)=>{
              // value就是输入的权限名称
              let result=await getPermissionList()
              // 判断是否为编辑模式
              if(this.permissionForm.id){
                // 编辑场景,将点击的那一组数据过滤掉，保留其它数据，这样编辑时就不会检验点击的表单数据了，避免了回显时的错误校验
                result=result.filter((item)=>item.id!==this.permissionForm.id)
              }
              // 检查result数组中是否存在传入的value
              if(result.some((item)=>item.name===value)){
                callback(new Error('已存在该权限名称'))
              }else{
                callback()
              }

            }
          }
        ],
        code:[
          { required: true, message: '请输入权限标识', trigger: 'blur' },
          {
            pattern: /^\S{2,20}$/,
            message: '标识必须是2-20位的非空字符',
            trigger: 'blur'
          },
          // 自定义检验
          {
            validator:async(rule,value,callback)=>{
              // value就是输入的权限名称
              let result=await getPermissionList()
              // 判断是否为编辑模式
              if(this.permissionForm.id){
                // 编辑场景,将点击的那一组数据过滤掉，保留其它数据，这样编辑时就不会检验点击的表单数据了，避免了回显时的错误校验
                result=result.filter((item)=>item.id!==this.permissionForm.id)
              }
              // 检查result数组中是否存在传入的value
              if(result.some((item)=>item.code===value)){
                callback(new Error('已存在该权限标识'))
              }else{
                callback()
              }

            }
          }
        ],
        description:[
          { required: true, message: '请输入权限描述', trigger: 'blur' },
        ]
      }
      
    }
  },
  props:{
    // 控制弹层显示
    showDialog:{
      type:Boolean,
      default:false,
      required:true
    },
    // 接收父组件权限点id
    permissionId:{
      type:[String,Number],
      
      
    },
    // 接收父组件权限点类型
    permissionType:{
      type:Number,
      
    },
    // 不同场景下的标题
    showTitle:{
      type:String,
      required:true
    }
  },
  methods:{
    // 关闭弹层触发
    close(){
      // 清空重置表单数据
      this.$refs.permissionForm.resetFields()
      // 子传父，修改父组件的值,关闭弹层
      this.$emit('update:showDialog',false)
      
    },
    // 点击确认时调用新增权限接口
    async btnOk(){
      try {
        await this.$refs.permissionForm.validate()
      if(this.permissionForm.id){
        // 编辑模式
        await editPermissionDetail(this.permissionForm)
        
      }else{
        // 添加模式
        await addPermission({...this.permissionForm,pid:this.permissionId,type:this.permissionType})
      }
      
      // 通知父组件实时更新获取最新数据，不需要手动刷新了
      this.$emit('updatePermission')
      // 添加成功后提示用户
      this.permissionForm.id?Message.success('编辑成功'):Message.success('添加成功')
      // 关闭弹层并重置表单
      this.close()
      } catch (error) {
        // console.log(error);
        
      }
      

    },
    // 获取点击的权限的详情数据，便于父组件点击编辑时进行回显
    async getPermissionDetails(){
      const result=await getPermissionDetail(this.permissionId)
      // 注意：此时回显的数据result里面有额外的字段id，后面将该数据赋值给表单数据时，表单数据会被覆盖（通过vue调试查看），可以根据这个id来判断是否为编辑还是添加环境
      // console.log(result);
      // 将回显的数据赋值给permissionForm进行渲染
      this.permissionForm=result

      
    }
  }
}
</script>

<style scoped>

</style>